<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="referrer" content="never">
    <title>表单的重绘</title>
    <link rel="stylesheet" href="../lib/layui-v2.5.7/layui/css/layui.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="layui-container">
        <!-- layui中的表单如果是动态生成的，选择元素会失效，需要表格重绘才能生效
            form.render(type, form-filter)
        -->
    </div>
    <script src="../lib/layui-v2.5.7/layui/layui.all.js"></script>
    <script type="text/javascript">
        var $ = layui.$,
            form = layui.form;

        $(".layui-container").html(`<div class="layui-form" lay-filter="formEle">
            <input type="checkbox" title="香蕉">
            <input type="radio" title="男" name="sex">
            <input type="radio" title="女" name="sex">
        </div>`);

        $(".layui-container").append(`<div class="layui-form" lay-filter="formEle1">
            <input type="checkbox" title="苹果">
            <input type="radio" title="男" name="sex">
            <input type="radio" title="女" name="sex">
        </div>`);

        // form.render();
        // form.render("checkbox");
        // form.render("checkbox", "formEle");
        form.render(null, "formEle"); // 第一写null，第二写元素lay-filter，渲染改元素下所有选择内容
    </script>
</body>
</html>